<template>
  <div class="user">
    <basic-container>
      <avue-crud :option="option"
                 ref="crud"
                 v-model="form"
                 :page="page"
                 @on-load="getList"
                 @size-change="sizeChange"
                 @current-change="currentChange"
                 :table-loading="listLoading"
                 @search-change="handleFilter"
                 @refresh-change="handleRefreshChange"
                 @row-update="update"
                 @row-save="create"
                 :before-open="handleOpenBefore"
                 :data="list">
        <template slot="menuLeft">
          <el-button
                     class="filter-item"
                     @click="$refs.crud.rowAdd()"
                     type="primary"
                     icon="el-icon-edit">添加
          </el-button>
        </template>

        <template slot="menu"
                  slot-scope="scope">
          <el-button
                     type="text"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row,scope.index)">编辑
          </el-button>
          <el-button
                     type="text"
                     icon="el-icon-delete"
                     @click="deletes(scope.row,scope.index)">删除
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>

</template>

<script>
  // import {doGet,doPost,doDelet,doPut} from '@/router/axios'
  import { formCreate } from "@/api/index";
  export default {
    name: "table_user",
    data() {
      return {
        option: tableOption,
        defaultProps: {
          label: "name",
          value: 'id',
        },
        page: {
          total: 0, // 总页数
          current: 1, // 当前页数
          size: 20, // 每页显示多少条,
          isAsc: false//是否倒序
        },
        list: [],
        listLoading: true,
        form: {}
      };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    methods: {
      getList(page, params) {
        if(params==undefined||params==null||params==""){
          params={};
        }
        // this.listLoading = true;
         params.current=page.current-1;
         params.size=page.size;
        // doGet('/online/tableOperator/page',params).then(res=>{
        //   this.list = res.data.data.dataList;
        //   this.page.total = res.data.data.totalElements
        //   this.listLoading = false;
        // })
         formCreate.tableOperatorPage(params).then(res=>{
          this.list = res.data.dataList;
          this.page.total = res.data.totalElements

        })

      },
      sizeChange(size) {
        this.page.size = size
      },
      currentChange(current) {
        this.page.current = current
      },
      handleFilter(param, done) {
        this.page.current = 1
        this.getList(this.page, param);
        done()
      },
      handleRefreshChange() {
        this.getList(this.page)
      },
      handleOpenBefore(show, type) {
        window.boxType = type
        // 若是编辑、查看回显名称
        if (['edit', 'views'].includes(type)) {

        } else if (type === 'add') {

        }
        show();
      },
      handleUpdate(row, index) {
        this.$refs.crud.rowEdit(row,index);
      },
      create(row, done, loading) {
        // this.listLoading = true;
        // doPost('/online/tableOperator/save',this.form).then(res=>{
        //   if(res.data.code==200) {
        //     this.getList(this.page);
        //     done();
        //     this.$message.success('创建成功')
        //     return false;
        //   }
        //   else{
        //     this.listLoading = false;
        //     this.$message.error(res.data.msg)
        //   }
        //   loading();
        // }).catch(() => {
        //   loading();
        // });
         formCreate.tableOperatorSave(this.form).then(res=>{
          if(res.code==200) {
            this.getList(this.page);
            done();
            this.$message.success('创建成功')
            return false;
          }
          else{
            this.$message.error(res.msg)
          }
          loading();
        }).catch(() => {
          loading();
        });
      },
      update(row, index, done, loading) {
        // doPut('/online/tableOperator/update',this.form).then(res=>{
        //   if(res.data.code==200) {
        //     this.getList(this.page);
        //     done();
        //     this.$message.success('更新成功')
        //     return ;
        //   }
        //   else{
        //     this.$message.error(res.data.msg)
        //     return ;
        //   }
        //   loading();
        // }).catch(() => {
        //   loading();
        // });
         formCreate.tableOperatorUpdate(this.form).then(res=>{
          if(res.code==200) {
            this.getList(this.page);
            done();
            this.$message.success('更新成功')
            return ;
          }
          else{
            this.$message.error(res.msg)
            return ;
          }
          loading();
        }).catch(() => {
          loading();
        });
      },
      deletes(row) {
        this.$confirm("此操作将永久删除该调数据, 是否继续?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消", type: "warning"
                }
        ).then(() => {
          // doDelet('/online/tableOperator/delete/'+row.id).then(res=>{
          //   if(res.data.code==200) {
          //     this.getList(this.page);
          //     this.$message.success('删除成功')
          //   }
          //   else{
          //     this.$message.error(res.data.msg)
          //   }
          //   loading();
          // }).catch(() => {
          //   loading();
          //   this.$message.error('服务异常')
          // });
           formCreate.tableOperatorDelete(row.id).then(res=>{
            if(res.code==200) {
              this.getList(this.page);
              this.$message.success('删除成功')
            }
            else{
              this.$message.error(res.msg)
            }
            loading();
          }).catch(() => {
            loading();
            this.$message.error('服务异常')
          });

        });
      }
    }
  };

  export const tableOption = {
    border: true,
    index: true,
    indexLabel: '序号',
    stripe: true,
    menuAlign: 'center',
    searchMenuSpan: 6,
    editBtn: false,
    delBtn: false,
    align: 'center',
    addBtn: false,
    column: [{
      fixed: true,
      label: 'id',
      prop: 'id',
      span: 24,
      hide: true,
      editDisplay: false,
      addDisplay: false
     }
      ,{
      fixed: true,
      label: '表单id',
      prop: 'tableId',
      editDisplay: true,
      addDisplay: true,
      rules: [{
          required: true,
          trigger: 'blur',
        message: '请输入表单id'
        },
        {
          min: '0',
          max: '32',
          message: '长度在 0 到 32 个字符',
          trigger: 'blur'
        }
        ],
      span: 12
    }
      ,{
      fixed: true,
      label: '动作编码',
      prop: 'operatorCode',
      editDisplay: true,
      addDisplay: true,
      rules: [{
          required: true,
          trigger: 'blur',
        message: '请输入动作编码'
        },
        {
          min: '0',
          max: '2',
          message: '长度在 0 到 2 个字符',
          trigger: 'blur'
        }
        ],
      span: 12
    }
      ,{
      fixed: true,
      label: '查询sql',
      prop: 'operatorSelectSql',
      editDisplay: true,
      addDisplay: true,
      rules: [{
          required: true,
          trigger: 'blur',
        message: '请输入查询sql'
        },
        {
          min: '0',
          max: '500',
          message: '长度在 0 到 500 个字符',
          trigger: 'blur'
        }
        ],
      span: 12
    }
      ,{
      fixed: true,
      label: '条件sql',
      prop: 'operatorWhereSql',
      editDisplay: true,
      addDisplay: true,
      rules: [{
          required: true,
          trigger: 'blur',
        message: '请输入条件sql'
        },
        {
          min: '0',
          max: '500',
          message: '长度在 0 到 500 个字符',
          trigger: 'blur'
        }
        ],
      span: 12
    }
      ,{
      fixed: true,
      label: '排序sql',
      prop: 'operatorSortSql',
      editDisplay: true,
      addDisplay: true,
      rules: [{
          required: true,
          trigger: 'blur',
        message: '请输入排序sql'
        },
        {
          min: '0',
          max: '500',
          message: '长度在 0 到 500 个字符',
          trigger: 'blur'
        }
        ],
      span: 12
    }
      ,{
      fixed: true,
      label: '创建时间',
      prop: 'createTime',
        editDisplay: false,
        addDisplay:  false,
      span: 12
    }
      ,{
      fixed: true,
      label: '更新时间',
      prop: 'updateTime',
        editDisplay: false,
        addDisplay:  false,
      span: 12
    }
    ]
  }

</script>